'use strict';

import React, {Component, PropTypes} from 'react';

export default class Tag extends Component {
	constructor(props) {
		super(props);
		this.state = {
			radius: '10px',
			textColor: '#35404d',
			height: '80px'
		};
	}

	render() {
		return (
			<div style={{
				height: this.state.height
			}}>
				<div 
					className="am-fl am-text-center am-vertical-align"
					style={{
						width: '30%',
						height: this.state.height,
						backgroundColor: this.props.color,
						borderRadius: `${this.state.radius} 0 0 ${this.state.radius}`
					}}
				>
					<img 
						src={this.props.logo}
						alt=""
						className="am-vertical-align-middle"
						style={{
							width: 30
						}}
					/>
				</div>
				<div 
					className="am-fl am-text-center am-vertical-align"
					style={{
						width: '70%',
						height: this.state.height,
						backgroundColor: '#ffffff',
						borderRadius: `0 ${this.state.radius} ${this.state.radius} 0`
					}}
				>
					<p
						className="am-text-xl am-margin-0 am-vertical-align-middle"
						style={{
							color: this.state.textColor
						}}
					>
						{this.props.content}
						<span
							className="am-text-sm am-block"
							style={{
								color: this.state.textColor
							}}
						>{this.props.title}</span>
					</p>
				</div>
			</div>
		);
	}
}

Tag.propTypes = {
	icon: PropTypes.string,
	title: PropTypes.string,
	content: PropTypes.oneOfType([
		PropTypes.number,
		PropTypes.string
	]),
	color: PropTypes.string
};
Tag.defaultProps = {
	icon: '',
	title: '',
	content: '',
	color: '#dd524d'
};
